<template>
  <div class="login">

    <div class="head">
      <span class="dengl">快捷登录</span>
      <span class="kuai" @click="toLogin">账号密码登录</span>
    </div>

    <div class="inputs">
      <input type="text" placeholder="请输入手机号" class="zhk"><br>
      <input type="text" placeholder="请输入密码"><br>
      <van-button size="large" class="anniu">登录</van-button>
    </div>

    <div class="zhuce">
      <span class="zc">点击注册</span>
      <span class="wj">忘记密码</span>
    </div>

    <van-divider>其他登录</van-divider>

    <div class="imgs">
      <img src="../image/qq.png" alt="">
      <img src="../image/weixin.png" alt="">
      <img src="../image/weibo.png" alt="">
    </div>


  </div>
</template>

<script>
import { checkPrime } from 'crypto';
import { runInThisContext } from 'vm';

export default {
  data(){
    return {
    }
  },
  methods:{
   
  }
}
</script>

<style lang="scss" scoped>
.login {
  padding-top: 30%;
  .head{
    width: 100%;
    display: flex;
    justify-content: space-around;
  }
}
.login .dengl {
  font-size: 20px;
  padding-right: 10px;
}

.login .kuai {
  color: #999999;
}

.login {
  .inputs {
    margin: 0 auto;
    display: flex;
    width: 80%;
    flex-direction: column;
    input {
      margin-top: 30px;
      border: 0px solid #000;
      border-bottom: 1px solid #000;
      line-height: 30px;
    }
    .anniu {
      background-color: #1890FF;
      width: 100%;
      height: 40px;
      border-radius: 40px;
      margin-top: 30px;
      color: #fff;
    }
  }
}





.zc {
  margin-right: 40px;
  color: #1890FF;
}

.zhuce {
  margin-top: 10px;
  color: #1890FF;
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.zhk {
  margin-top: 40px;
}

.qtdl {
  margin-top: 100px;
}

.qtdl .qt {
  font-size: 10px;
}

.login .imgs {
  width: 100%;
  display: flex;
  justify-content: space-around;

  img {
    width: 40px;
  }
}
</style>
